<template>
  <div class="chart-detail">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <!-- 头部显示 -->
    <div class="detail-top">
      <div class="top-left">
        基于缴费基数的单位分析详情
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <!-- 详情 -->
    <div class="detail-box" :style="{height:2*height+100+'px'}">
      <!-- 详情头部 -->
      <h3 class="chart-title" style="border-bottom:solid 1px #1d2027;height:42px;line-height:42px;margin:0 20px;background:#1b2b44;">
        <div class="area-title-name"  @mouseenter="mouseenter()"
             @mouseleave="mouseleave()">{{ areaTitle }} &nbsp; | &nbsp; {{insuranceName}} &nbsp;| &nbsp; {{title}}年 &nbsp;| &nbsp; {{name}}
        </div>
      </h3>
      <div class="chart-title-floating" v-show="showFloating">
        <span>统筹区: {{ this.propParams.areaName }}</span><br>
        <span>险种: {{insuranceName}}</span><br>
        <span>年份: {{ title }}年</span><br>
        <span>职业类型: {{name}}</span>
      </div>
      <div class="three-half-chart-container" >
        <div class="four-part-box">
          <div class="second-search">
            <div class="search-right">
              <div class="secondSearchBtn" @click="showSecondSearch">
                <svg class="searchSvg" style="float:left;" viewBox="0 0 1024 1024">
                  <path :d="svgPath.searchBtn"></path>
                </svg>
                <div style="float:left;margin-left:10px;">
                  <span v-show="isAll==0">按条件筛选</span>
                  <div class="chooseContainer" v-show="isAll>0">
                    <span>{{careerType}}</span>
                    <span>{{economicType}}</span>
                  </div>
                </div>
              </div>
              <svg class="searchBtn searchSvg resetBtn" @click="reset" viewBox="0 0 1024 1024">
                <path :d="svgPath.resetBtn1"></path>
                <path :d="svgPath.resetBtn2"></path>
              </svg>
              <el-tooltip v-show="showExplain" class="item" effect="dark" :content="explain" placement="left">
                <svg class="searchBtn searchSvg" viewBox="0 0 1024 1024">
                  <path :d="svgPath.helpBtn"></path>
                </svg>
              </el-tooltip>
            </div>
          </div>
          <div class="four-chart detailChartContainer">
            <div class="" style="overflow:hidden;width:100%;height:100%;">
              <div class="four-chart-left">
                <div class="four-chart-title" style="margin-bottom:16px;">
                  <span> {{reportName1}}</span>
                  <span class="title-bk-container"></span>
                </div>
                <div v-show="showFirst"
                     style="width:95%;margin-left:5%;"
                     class="four-chart-item detailChartItem treeMap-chart"
                     id="personPayBaseAnalysisDetail1"></div>
              </div>
              <div class="four-chart-right" >
                <div class="four-chart-title">
                  <span>{{reportName2}}</span>
                  <span class="title-bk-container"></span>
                </div>
                <div  v-show="showFirst" class="four-chart-item detailChartItem" id="personPayBaseAnalysisDetail2"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="three-half-chart-container">
        <div class="four-part-box">
          <div class="four-chart detailChartContainer detailChartContainer1" :style="{height:height+'px'}">
            <div class="next-scatter" style="overflow:hidden;width:100%;height:100%;margin-top:10px;">
              <div class="four-chart-title">
                <span> 单位缴费水平分析</span>
                <span class="title-bk-container"></span>
              </div>
              <div class="scatter-chooseType">
                <span>气泡大小表示：</span>
                <el-radio v-model="radio" label="1"><span :style="{background:yellow}" class="choose-point"></span>缴费基数为社平工资60%人数占比</el-radio>
                <el-radio v-model="radio" label="3"><span :style="{background:blue}" class="choose-point"></span>缴费基数为社平工资300%人数占比</el-radio>
                <el-radio v-model="radio" label="2"><span :style="{background:pink}" class="choose-point"></span>缴费基数为社平工资60%~300%人数占比</el-radio>
                <el-tooltip class="item" effect="dark" placement="left">
                  <div slot="content" style="line-height:24px;" v-html="explain"></div>
                  <svg class="searchBtn searchSvg scatterHelpSvg" viewBox="0 0 1024 1024">
                    <path :d="svgPath.helpBtn"></path>
                  </svg>
                </el-tooltip>
              </div>
              <div v-show="showScatter" id="scatter" :style="{height:height-65+'px'}"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="second-search-box" v-show="showSearchBox">
        <div class="second-search-wrapper1" style="marginTop:-160px">
          <div class="second-title">
            <div class="title-name">
              <span>请选择企业分析维度</span>
            </div>
            <div class="second-btn-box">
              <span class="dap-button" style="margin-right:10px;" @click="saveMessage">确定</span>
              <span class="dap-close-button" @click="hideBox" >取消</span>
            </div>
          </div>
          <div class="second-main">
            <div class="second-item">
              <h3 class="second-item-name">
                <span class="left-circle-wrapper"></span>
                行业类别
              </h3>
              <ul class="second-contain">
                <li v-for="(item,index) in careerTypeData" :style="{marginTop:index>6?'20px':''}" @click="chooseCareer(index,item)" :class="careerIndex==index?'activeLi':''">{{item.name}}</li>
              </ul>
            </div>
            <div class="second-item" style="padding-bottom:20px;">
              <h3 class="second-item-name">
                <span class="left-circle-wrapper"></span>
                经济类型
              </h3>
              <ul class="second-contain">
                <li v-for="(item,index) in economicTypeData" @click="chooseEconomicType(index,item)" :class="economicTypeIndex==index?'activeLi':''">{{item.name}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div  class="medical-conclusion-box">
        <span>结论：</span>
        <div class="medical-conclusion-container"></div>
      </div>
    </div>
  </div>
</template>
<script>

  import '../../assets/css/chartDetail.css'
  import {loadingOpt,svgPath,getValue} from '../../assets/js/utils.js'
  import {getPersonPayBaseAnalysisDetail,baseApiF} from '../../api/api'
  import timeLeft from '../../assets/img/chart-svg/time-left.svg'
  import timeRight from '../../assets/img/chart-svg/time-right.svg'
  import avgVal from '../../assets/img/chart-svg/avgVal.svg'
  export default {
    name: 'chartDetail',
    props: ['isChange'],
    data () {
      return {
        showScatter:true,
        showFirst:true,
        avgVal,
        timeLeft,
        timeRight,
        radio:'1',
        svgPath,
        chooseCareerIndex:0,
        chooseSexIndex:0,
        careerIndex:0,
        economicTypeIndex:0,
        careerType:'全部行业',
        economicType:'全部经济类型',
        careerTypeData:['全部性别','男性','女性','未知'],
        economicTypeData:['全部年龄段','45岁以下','45-59岁','60-74岁','75岁-89岁','90岁以上','未知'],
        showSearchBox:false,
        title: '',
        areaTitle: '',
        insuranceName:'',
        name:'',
        isShowChart: true,
        height: 800,
        canShow: true,
        showFloating: false,
        propParams: {},
        showExplain:false,
        explain:'提示语',
        conclusion:'结论',
        economicCode:0,
        reportName1:'基于缴费基数总额的单位经济类型分布',
        reportName2:'基于缴费基数总额的行业分布',
        yellow:'rgba(255,215,105,0.8)',
        blue:'rgba(20,150,250,0.8)',
        pink:'rgba(255,105,150,0.8)',
        yellowS:'rgba(255,215,105,0)',
        blueS:'rgba(20,150,250,0)',
        pinkS:'rgba(255,105,150,0)',
        chooseColor:'rgba(255,215,105,0.8)',
        chooseColorS:'rgba(255,215,105,0)',
        currentIndex:0,
        minMoney:'',
        maxMoney:'',
        careerCode:0,
        timeLineData:[]
      }
    },
    computed:{
      isAll(){
        return this.careerIndex+this.economicTypeIndex;
      }
    },
    mounted () {
      if(document.querySelector('.el-main')){
        document.querySelector('.el-main').scrollTop = 0 + 'px';
      }
      let that = this;
      this.propParams = this.$route.query;
      this.title = this.propParams.queryYear;
      this.areaTitle = this.filterLogText(this.propParams.areaName);
      this.insuranceName = this.propParams.insuranceName;
      this.name = this.propParams.name
      this.getContentH();
      setTimeout(() => {
        this.myChart1 = this.$echarts.init(document.getElementById('personPayBaseAnalysisDetail1'));
        this.myChart2 = this.$echarts.init(document.getElementById('personPayBaseAnalysisDetail2'));
        this.myChart3 = this.$echarts.init(document.getElementById('scatter'));
        // this.drawScatter()
        // this.hideLoading()
        this.getData(1);
        this.getScatterData(1)
        this.myChart3.on('timelineChanged',function(params){
          let i = params.currentIndex;
          that.currentIndex = i;
          that.minMoney = that.moneys[i][0];
          that.maxMoney = that.moneys[i][1]
          that.myChart3.showLoading(loadingOpt)
          that.getScatterData();
        })
        let that = this;
        this.myChart1.on('click',function(params){
          if(params.selfType=='breadcrumb'&&params.nodeData.dataIndex==0){
            if(that.careerCode!=0){
              that.careerIndex = 0;
              that.careerCode = 0;
              that.myChart1.showLoading(loadingOpt);
              that.getData();
            }
          }
        })
        document.querySelector('.el-main').scrollTop = 0 + 'px';
      }, 101)
    },
    watch: {
      isChange () {
        this.getContentH();
      },
      radio(val){
        if(val==1){
          this.chooseColor = this.yellow;
          this.chooseColorS = this.yellowS;
        }else if(val==3){
          this.chooseColor = this.blue;
          this.chooseColorS = this.yellowS;
        }else if(val==2){
          this.chooseColor = this.pink;
          this.chooseColorS = this.yellowS;
        }
        // this.drawScatter()
        this.myChart3.clear();
        this.getScatterData();
      },
    },
    methods: {
      showLoading(){
        this.myChart1.showLoading(loadingOpt);
        this.myChart2.showLoading(loadingOpt);
        // this.myChart3.showLoading(loadingOpt);
      },
      hideLoading(){
        this.myChart1.hideLoading();
        this.myChart2.hideLoading();
        this.myChart3.hideLoading();
      },
      getData (type) {
        this.showLoading()
        getPersonPayBaseAnalysisDetail('person/payBaseAnalysisDetail', this.propParams.queryYear, this.propParams.areaCode, this.propParams.insuredType, this.economicCode, this.propParams.unitType, this.careerCode)
          .then(response => {
            let json = response.data;
            if (response.code === 0) {
              this.showFirst = true;
              if(type){
                this.careerTypeData = json.dimensions.tradeCats;
                this.economicTypeData = json.dimensions.ecoTypes;
              }
              this.reportName1 = json.industry.reportName;
              this.reportName2 = json.eco.reportName;
              this.hideLoading();
              this.drawBar(json.eco);
              this.drawTreeMap(json.industry)
              // this.drawScatter();
            }else{
              this.showFirst = false;
            }
          })
      },
      getScatterData(type) {
        this.myChart3.clear();
        let data = {};
        data.queryYear = this.propParams.queryYear;
        data.insuredType = this.propParams.insuredType;
        data.unitType = this.propParams.unitType;
        data.ecoType = this.economicCode;
        data.paiXu = this.radio;
        data.maxMoney = this.maxMoney;
        data.minMoney = this.minMoney;
        data.industryCode = this.careerCode;
        this.myChart3.showLoading(loadingOpt)
        this.$axios.post(`${baseApiF()}person/payBaseLevelAnalysis`,data).then(res=>{
          let json = res.data;
          if(json.code==0){
            this.explain = json.data.explain
            this.hideLoading();
            this.showScatter = true;
            this.drawScatter(json.data,type)
          }else if(json.code==99){
            this.hideLoading();
            this.showScatter = false;
            this.drawScatter();
          }
        })
      },
      // 设置高度
      getContentH () {
        setTimeout(() => {
          let height = document.documentElement.clientHeight;
          let barHeight = 0;
          if (document.querySelector('.el-header')) {
            this.canShow = true;
            barHeight = document.querySelector('.el-header').clientHeight;
          } else {
            this.canShow = false;
          }
          this.height = height - barHeight - 96;
          document.querySelector('.detailChartContainer').style.height = this.height-74 + 'px';
          document.querySelector('.detailChartContainer1').style.height = this.height-74 + 'px';
          let oDom = document.querySelectorAll('.detailChartItem');
          for(let j = 0; j<oDom.length; j++){
            oDom[j].style.height = this.height-106 + 'px';
          }
        }, 100);
        setTimeout(() => {
          this.myChart1.resize();
          this.myChart2.resize();
          this.myChart3.resize();
        }, 301)
      },
      goBack () {
        // this.$router.go(-1);
        this.$router.push(this.propParams.hash.slice(1,this.propParams.hash.length))
        sessionStorage.setItem ('isPrev',1)
      },
      // 字数太长省略
      filterLogText (value, leng = 7) {
        if(!value){
          return
        }
        if (value.length <= leng) {
          return value;
        } else {
          return value.slice(0, leng) + '...';
        }
      },
      mouseenter () {
        this.showFloating = true;
      },
      mouseleave () {
        this.showFloating = false;
      },
      chartClear(){
        this.myChart1.clear();
        this.myChart2.clear()
      },
      saveMessage(){
        this.chartClear();
        this.myChart1.showLoading(loadingOpt);
        this.myChart2.showLoading(loadingOpt);
        this.getData();
        this.getScatterData();
        this.showSearchBox = false;
      },
      hideBox(){
        this.showSearchBox = false;
        let arr = JSON.parse(this.oldIndex);
        this.economicTypeIndex = arr[0];
        this.careerIndex = arr[1];
        this.economicCode = arr[2];
        this.careerType = arr[3];
        this.economicType = arr[4];
      },
      // 选择职业
      chooseCareer(index,item){
        this.careerIndex = index;
        this.careerType = item.name;
        this.careerCode = item.code;
      },
      // 选择经济类型
      chooseEconomicType(index,item){
        this.economicTypeIndex = index;
        this.economicType=item.name;
        this.economicCode = item.code;
      },
      showSecondSearch(){
        this.showSearchBox = true;
        let arr = [];
        arr.push(this.economicTypeIndex);
        arr.push(this.careerIndex);
        arr.push(this.economicCode);
        arr.push(this.careerType)
        arr.push(this.economicType)
        this.oldIndex = JSON.stringify(arr);
      },
      // 重置
      reset(){
        this.economicTypeIndex = 0;
        this.economicCode = 0;
        this.careerIndex = 0;
        this.careerCode = 0;
        this.radio = '1';
        this.myChart1.showLoading(loadingOpt);
        this.myChart2.showLoading(loadingOpt);
        this.getData();
        this.getScatterData();
      },
      drawTreeMap(json){
        let that = this;
        let data = []
        let colorList = [];
        let num = 0;
        if(this.careerCode==0){
          num = 1;
          json.ins.map((item,index)=>{
            let obj = {};
            obj.value = item.payBase;
            obj.name = item.indusName;
            obj.indusCode = item.indusCode;
            if(item.aveValue>json.avgValue){
              obj.color = '#38b8a1'
              colorList.push('#38b8a1')
            }else{
              obj.color = '#1297f6'
              colorList.push('#1297f6')
            }
            data.push(obj)
          })
        }else{
          json.ins.map((item,index)=>{
            let obj = {};
            obj.value = item.payBase;
            obj.name = item.indusName;
            obj.indusCode = item.indusCode;
            if(item.indusCode == this.careerCode){
              num = 1;
              if(item.aveValue>json.avgValue){
                obj.color = '#38b8a1';
                colorList.push('#38b8a1')
              }else{
                obj.color = '#1297f6';
                colorList.push('#1297f6')
              }
              data.push(obj)
            }else{
              // obj.color = '#a8a8a8';
              // colorList.push('#a8a8a8')
            }
            // data.push(obj)
          })
        }
        if(num==0){
          data = []
        }
        let option = {
          color:colorList,
          legend:{
            top:0,
            left:'center',
            // left:'center',
            selectedMode:false,
            tooltip:{
              show:true,
              formatter:function(params){
                return `年度平均值：${json.avgValue}元`
              }
            },
            inactiveColor:'rgba(0,0,0,0)',
            data:[{
              name: '行业分布',
              textStyle:{
                color:'rgba(0,0,0,0)',
                fontSize:12,
                padding:[5,100],
                backgroundColor:{
                  image:that.avgVal
                },
                emphasis:{
                  color:'rgba(0,0,0,0)',
                }
              },
              icon:'none',
            }]
          },
          tooltip:{
            textStyle:{
              fontSize:12,
            },
            formatter:function(params){
              let id = params.data.indusCode;
              if(id){
                let data = {};
                json.dialogs.map(item=>{
                  if(item.indusCode==id){
                    data = item;
                  }
                })
                return`
                     <p>${data.indusName}</p>
                     <p>${data.payBase}</p>
                     <p>${data.baseProp}</p>
                     <p>${data.units}</p>
                     <p>${data.persons}</p>
                     <p>${data.avgBase}</p>
                     <p> 年度平均值：${json.avgValue}元</p>
              `
              }
            }
          },
          series:[{
            top:30,
            bottom:60,
            left:10,
            width:'92%',
            type:'treemap',
            name:num==1?'行业分布':'',
            data:data,
            visibleMin:1,
            roam:true,
            breadcrumb:{
              show:true,
              top:'85%',
              left:'40%',
              itemStyle:{
                color:'#1297f6',
                borderColor:'#fff',
                shadowColor:"#fff"
              }
            },
            label:{
              formatter:function(params){
               if(num==1){
                 if(params.value/10000>1){
                   return `${params.name}\n\n${Number((params.value/10000).toFixed(2))}万元`
                 }else{
                   return `${params.name}\n\n${Number((params.value).toFixed(2))}元`
                 }
               }
              }
            },
            levels: [
              {
                itemStyle: {
                  normal: {
                    borderColor: '#1b2b44',
                    borderWidth: 0,
                    gapWidth: 5,
                  },
                }
              }
            ],
            nodeClick:'zoomToNode',
          }]
        }
        this.myChart1.setOption(option)
      },
      drawBar(json){
        let option = {
          grid:{
            left:100,
            right:60,
            bottom:60,
            top:60,
          },
          legend:{
            data:['缴费基数总额'],
            left: 'center',
            bottom:10,
            itemWidth:10,
            itemHeight:10,
            symbol:'rect',
            selectedMode:false,
            textStyle:{
              color:'#fff'
            },
          },
          tooltip:{
            textStyle:{
              fontSize:12,
            },
            formatter:function(params){
              let i = params.dataIndex;
              let data = json.dialogs;
              if(data){
                return`
                     <p>${data[i].ecoName}</p>
                     <p>${data[i].baseTotal}</p>
                     <p>${data[i].baseProp}</p>
                     <p>${data[i].units}</p>
                     <p>${data[i].persons}</p>
                     <p>${data[i].avgBase}</p>
              `
              }
            }
          },
          xAxis:{
            data: json.ecoName,
            axisLine:{ //x轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{ //x轴的刻度短竖线是否显示
              show:false
            },
            axisLabel : {
              interval:0,
              textStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            name:'金额(万元)',
            nameTextStyle:{
              color:'#fff',
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            splitLine: {
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: function(val){
                return `${Number((val/10000).toFixed(2))}`
              },
              textStyle: {
                color: '#fff'
              }
            },
          },
          series: [{
            name:'缴费基数总额',
            data: json.bases,
            type: 'bar',
            itemStyle:{
              color:'#eb678b'
            },
            label:{
              show: true,
              position: 'top',
              color:'#fff',
              formatter:function(params){
                return `${Number((params.data/10000).toFixed(2))}`;
              }
            },
            barWidth:'30%',
            barMaxWidth:30
          }]
        }
        this.myChart2.setOption(option)
      },
      drawScatter(json,type){
        let chooseNum = 4
        if(this.radio==1){
          chooseNum = 4
        }else if(this.radio==2){
          chooseNum = 6
        }else{
          chooseNum = 5
        }
        let that = this;
        let option = {
            backgroundColor:'#1B2B44',
            grid:{
              top:30,
              bottom:100,
              left:120,
            },
            visualMap: [ {
              left: 'right',
              top: '1%',
              dimension: 7,
              min: 0,
              max: 100,
              itemWidth: 30,
              itemHeight: 70,
              calculable: true,
              formatter: function (value) {
                return   `${Number(value.toFixed(2))}%`; // 范围标签显示内容。
              },
              text: ['气泡大小'],
              precision: 2,
              textGap: 20,
              textStyle: {
                color: '#fff'
              },
              inRange: {
                symbolSize: [10, 70],
              },
              outOfRange: {
                symbolSize:0,
                color: [`${that.chooseColorS}`]
              },
              controller: {
                inRange: {
                  color:[`${that.chooseColor}`],
                },
                outOfRange: {
                  color: [`${that.chooseColorS}`]
                }
              }
            },{
              left: 'right',
              top:'40%',
              dimension: 3,
              min: json.minAve?json.minAve:0,
              max: json.maxAve,
              itemHeight: 70,
              calculable: true,
              precision: 2,
              text: ['气泡颜色'],
              textGap: 20,
              formatter: function (value) {
                return   `${Number(value.toFixed(2))}`; // 范围标签显示内容。
              },
              textStyle: {
                color: '#fff'
              },
              inRange: {
                colorLightness: [0.8,0.4]
              },
              outOfRange: {
                symbolSize:0,
                color: [`${that.chooseColorS}`]
              },
              controller: {
                inRange: {
                  color:[`${that.chooseColor}`],
                },
                outOfRange: {
                  color: [`${that.chooseColorS}`]
                }
              }
            }],
            tooltip:{
              textStyle:{
                fontSize:12,
              },
              formatter:function(params){
                let data = params.data;
                let money = '';
                let people = '';
                return `
                      <p>单位名称：${data[2]}</p>
                      <p>缴费基数总额：${getValue(data[1],'money')}</p>
                      <p>员工总人数：${getValue(data[0],'people')}</p>
                      <p>缴费基数平均值：${getValue(data[3],'money')}</p>
                      <p>缴费基数为社保工资60%的人数：${getValue(data[4],'people')}</p>
                      <p>缴费基数为社保工资300%的人数：${getValue(data[5],'people')}</p>
                      <p>缴费基数为社保工资60%~300%的人数：${getValue(data[6],'people')}</p>
                      `
              }
            },
            dataZoom: [
              {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                bottom:30,
                // top:'95%',
                // filterMode: 'filter'
              },
              {
                left: 40,
                id: 'dataZoomY',
                type: 'slider',
                yAxisIndex: [0],
                // filterMode: 'empty'
              }
            ],
            yAxis: {
              name:'缴费基数总额(万元)',
              nameTextStyle:{
                color:'#fff',
              },
              axisLabel: {
                show: true ,// 显示x轴坐标数值
                formatter:function(val){
                  return `${Number((val/10000).toFixed(2))}`
                },
                textStyle: {
                  color: '#fff',
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#294363'
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color:'#27405e'
                }
              },
              scale:true,
            },
            xAxis: {
              name:'职工人数（人）',
              nameTextStyle:{
                color:'#fff',
              },
              // scale:true,
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                show: false // 不显示x轴坐标的刻度
              },
              axisLine: {
                lineStyle: {
                  color: '#294363'
                }
              },
              splitLine: {
                show:false,
                lineStyle: {
                  type: 'dashed',
                  color:'#27405e'
                }
              },
            },
            series:[ {
              name: `单位缴费水平分析`,
              data: json.units,
              type: 'scatter',
              color:that.chooseColor
            }]
          }
        ;
        this.myChart3.setOption(option)
      },
      drawScatter1(json,type){
        let chooseNum = 4
        if(this.radio==1){
          chooseNum = 4
        }else if(this.radio==2){
          chooseNum = 6
        }else{
          chooseNum = 5
        }
        let that = this;
        let timeLineData = []
        let options = [];
        if(type){
          this.moneys = json.moneys;
          json.moneys.map((item,i)=>{
            let data = `${parseInt(item[0]/10000)}-${parseInt(item[1]/10000)}万`
            timeLineData.push(data);
          })
          this.timeLineData = timeLineData;
        }
        for(let i = 0; i<this.timeLineData.length ; i++ ){
          let data = [];
          if(json){
            data = json.units;
          }else{
            data = [];
          }
          options.push( {
            series:[ {
              name: `${i}`,
              data: data,
              type: 'scatter',
              // symbolSize: function (data) {
              //   return data[chooseNum]
              // },
              color:that.chooseColor
            }]
          })
        }
        let option = {
          baseOption:{
            grid:{
              top:'8%',
              height:'75%'
            },
            timeline: {
              show:true,
              width:'80%',
              left:'center',
              axisType:'category',
              padding:[30,0,0,0],
              lineStyle:{
                color:'#3281fd',
              },
              currentIndex:that.currentIndex,
              label:{
                color:'#fff',
                emphasis:{
                  color:'#fff'
                },
              },
              controlStyle:{
                showPlayBtn:false,
                nextIcon:`path://M0.85,14l9-6.5L0.85,1V14Z`,
                prevIcon:'path://M9.5,0.5L0.5,7l9,6.5V0.5Z',
                itemGap:20,
                color:'#3281fd',
                borderColor:'#3281fd',
                emphasis:{
                  color:'#3281fd',
                  borderColor:'#3281fd',
                }
              },
              itemStyle:{
                color:'#1b2b44',
                borderWidth:3,
                borderColor:'#99ccff',
                emphasis:{
                  color:'#1b2b44'
                }
              },
              checkpointStyle:{
                color:'#3281fd',
                symbolSize:15,
                borderWidth:3,
                borderColor:'#99ccff',
              },
              symbolSize:10,
              symbol:'circle',
              data: that.timeLineData,
            },
            visualMap: [ {
              left: 'right',
              top: '10%',
              dimension: chooseNum,
              min: 0,
              max: json?json.maxValue:1,
              // max:255,
              itemWidth: 30,
              itemHeight: 180,
              calculable: true,
              // precision: 0.1,
              text: ['气泡大小'],
              textGap: 30,
              textStyle: {
                color: '#fff'
              },
              inRange: {
                symbolSize: [10, 70],
              },
              outOfRange: {
                symbolSize: [10, 70],
                color: [`${that.chooseColorS}`]
              },
              controller: {
                inRange: {
                  color:[`${that.chooseColor}`],
                },
                outOfRange: {
                  color: [`${that.chooseColorS}`]
                }
              }
            },],
            tooltip:{
              formatter:function(params){
                let data = params.data;
                return `
                      <p>单位名称：${data[2]}</p>
                      <p>缴费基数总额：${data[0]}元</p>
                      <p>员工总人数：${data[1]}人</p>
                      <p>缴费基数平均值：${data[3]}元</p>
                      <p>缴费基数为社保工资60%的人数：${data[4]}人</p>
                      <p>缴费基数为社保工资300%的人数：${data[5]}人</p>
                      <p>缴费基数为社保工资60%~300%的人数：${data[6]}人</p>
                      `
              }
            },
            xAxis: {
              name:'缴费基数总额(万元)',
              nameTextStyle:{
                color:'#fff',
              },
              splitLine: {
                show:false,
              },
              axisLabel: {
                show: true ,// 显示x轴坐标数值
                formatter:function(val){
                  return `${Number((val/10000).toFixed(2))}`
                },
                textStyle: {
                  color: '#fff',
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#294363'
                }
              },
              axisTick: {
                show: false // 不显示x轴坐标的刻度
              },
              scale:true,
            },
            yAxis: {
              name:'职工人数（人）',
              nameTextStyle:{
                color:'#fff',
              },
              // scale:true,
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                show: false // 不显示x轴坐标的刻度
              },
              axisLine: {
                lineStyle: {
                  color: '#294363'
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color:'#27405e'
                }
              },
            },
          },
          options:options
        };
        this.myChart3.setOption(option)
      },
    },
  }
</script>
<style scoped>
  @import '../../assets/css/decision.css';
  .left-circle-wrapper {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018DDE;
    display: inline-block;
    margin-left: 12px;
    margin-right: 3px;
  }
  /*.four-chart-left{*/
    /*background:#1b2b44;*/
  /*}*/
  .scatter-chooseType{
    clear:both;
    padding:15px 0;
    color:#fff;
    text-align:center;
    font-size:12px;
    position:relative;
  }
  .scatterHelpSvg{
    position:absolute;
    top:0;
    right:0;
  }
  .choose-point{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
    margin-right:5px;
  }
  .four-chart-right,.four-chart-left{
    background:url('../../assets/img/noData.png') no-repeat center 50%;
    background-size:22%;
  }
  .second-search-wrapper1{
    width:810px;
    margin:auto;
    background-color:#1c2340;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-405px;
  }
  .medical-conclusion-box{
    height:80px;
    padding:0 40px;
    color:#fff;
    box-sizing:border-box;
    display:flex;
  }
  .medical-conclusion-box span{
    /*float:left;*/
    /*width:3.5%;*/
    width:40px;
    line-height:24px;
  }
  .medical-conclusion-container{
    /*float:right;*/
    height:100%;
    flex:auto;
    /*width:96.5%;*/
    box-sizing:border-box;
    border:solid 1px #313d4f;
    border-radius:10px;
    line-height:14px;
  }
  .next-scatter{
    background-image:url('../../assets/img/noData.png');
    background-size:18%;
    background-repeat:no-repeat;
    background-position:center 50%;
  }
</style>
